﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="~/lib/html5.js"></script>
    <script type="text/javascript" src="~/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="~/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="~/static/h-ui.admin.pro.iframe/css/H-ui.login.min.css" />
    <link rel="stylesheet" type="text/css" href="~/lib/Hui-iconfont/1.0.9/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="~/static/business/css/style.css" />
    <title>后台登录 - 客户管理系统</title>
</head>
<body>
    <div class="loginWraper">
        <div id="loginform" class="loginBox">
            <form class="form form-horizontal" id="formLogin">
                <div class="row clearfix">
                    <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
                    <div class="form-controls col-xs-8">
                        <input id="UserName" name="UserName" type="text" placeholder="账户" class="input-text size-L" required>
                    </div>
                </div>
                <div class="row clearfix">
                    <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
                    <div class="form-controls col-xs-8">
                        <input id="Password" name="Password" type="password" placeholder="密码" class="input-text size-L" required rangelength="[6,16]">
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="form-controls col-xs-8 col-xs-offset-3">
                        <input class="input-text size-L" name="VerifyCode" id="VerifyCode" maxlength="4" type="text" placeholder="验证码" style="width:150px;" required>
                        <img src="~/AdminManage/Main/CreateVerifyCode" id="imgVerifyCode" style="height:41px;">
                        <a id="kanbuq" href="javascript:;">看不清，换一张</a>
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="form-controls col-xs-8 col-xs-offset-3">
                        <input id="btnLogin" type="button" class="btn btn-success radius size-L" value="&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;">
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script type="text/javascript" src="~/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="~/static/h-ui/js/H-ui.min.js"></script>
    <script type="text/javascript" src="~/lib/layer/3.1.1/layer.js"></script>
    <script type="text/javascript" src="~/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="~/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="~/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <script type="text/javascript">
        $(function () {
            /* 表单验证，提交 */
            $("#formLogin").validate({
                messages: {
                    UserName: {
                        required: "账户不能为空"
                    },
                    Password: {
                        required: "密码不能为空",
                        rangelength: "密码长度6到16个字符"
                    },
                    VerifyCode: {
                        required: "验证码不能为空"
                    }
                }
            });

            $("#kanbuq,#imgVerifyCode").click(function () {
                $("#imgVerifyCode").attr("src", "/AdminManage/Main/CreateVerifyCode?" + Math.random())
            })

            $("#imgVerifyCode").click();

            $("#btnLogin").on('click', function () {
                let index = "";
                let flag = $("#formLogin").valid();
                if (!flag) {
                    return;
                }
                var formData = $("#formLogin").serializeArray();
                $.ajax({
                    url: "/AdminManage/Main/Login",
                    dataType: "json",
                    type: "post",
                    data: formData,
                    beforeSend: function () {
                        index = layer.load(1, { shade: [0.3, '#000'] })
                    },
                    success: function (res) {
                        if (res.code === 200) {
                            location.href = "/AdminManage/Main/Index";
                        }
                        else {
                            $("body").Huimodalalert({
                                content: "错误：" + res.errorMsg,
                                speed: 2000
                            });
                            $("#VerifyCode").val("");
                            $("#imgVerifyCode").click();
                        }
                    },
                    error: function () {
                        $("body").Huimodalalert({
                            content: "网络出错",
                            speed: 2000
                        });
                    },
                    complete: function () {
                        layer.close(index)
                    }
                });
            });

            $(document).keyup(function (event) {
                if (event.keyCode == 13) {
                    $("#btnLogin").trigger("click");
                }
            })
        })
    </script>
</body>
</html>
